<template>
  <div class="chart-content-wrapper">
    <top-filter :title="everyCostTypeFilter.title">
      <single-list-filter-without-cb :filter="filter" :type="'years'"
                                     @confirmSingleSelect="confirmSingleSelect">
      </single-list-filter-without-cb>
      <single-list-filter-without-cb :defaultText="'统筹区'" :filter="filter" :type="'planArea'"
                                     @confirmSingleSelect="confirmSingleSelect">
      </single-list-filter-without-cb>
      <group-list-filter :defaultText="'医院等级'" :filter="filter" :type="'hospital'"
                         @confirmDoubleSelect="confirmDoubleSelect">
      </group-list-filter>
    </top-filter>
    <h1 class="unit-text">单位：万元</h1>
    <div id="costTypeChartsId" style="height:68%;"></div>
    <summarize :showSummarizeText="conclusion"></summarize>
  </div>
</template>

<script type="text/ecmascript-6">
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import GroupListFilter from '../filter/group-list-filter.vue'
  import {pieChartOption} from '../../common/mixin'
  import {getCostTypeAnalyseData} from '../../../api/last-api'
  export default {
    props: ['isChange'],
    watch: {
      isChange(){
        setTimeout(()=>{
          this.myChart.resize();
        },101)
      }
    },
    components: {
      TopFilter,
      Summarize,
      SingleListFilterWithoutCb,
      GroupListFilter,
    },
    data () {
      return {
        filter: require('../../cnst/allInputs.json').data,
        itemStyle: {
          height: '300px'
        },
        everyCostTypeFilter: {
          title: '各收费类别占医疗收入比重分析'
        },
        conclusion: '',
        chartOptions: pieChartOption
      }
    },
    mounted(){
      //this.getCostTypeAnalyseData()
      this.setDataIntoCharts(require('./test/costType.json').data)
    },
    methods: {
      drawEveryCostTypeCharts(){
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(document.getElementById('costTypeChartsId'), null, {renderer: 'svg'})
        // 绘制图表
        this.myChart.setOption(this.chartOptions);
      },
      getCostTypeAnalyseData() {
        getCostTypeAnalyseData('1', '2', '3').then((rep) => {
          if (rep.code == 0) {
            this.setDataIntoCharts(rep.data)
          }
        })
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.everyCostTypeFilter.title = response.reportName
        // 设置结论
        this.conclusion = response.conclusion
        // 清空饼状图数据,此处采用两个饼状图叠加的方式
        this.chartOptions.series[0].data = []
        this.chartOptions.series[1].data = []
        response.arrayVo.forEach((item, index) => {
          let itemData = {
            value: item.value,
            name: item.name,
            itemStyle: {
              color: '#FFD66A'
            }
          }
          if (item.id == 1) {
            itemData.itemStyle.color = '#FFD66A'
          } else if (item.id == 2) {
            itemData.itemStyle.color = '#FF6A93'
          } else if (item.id == 3) {
            itemData.itemStyle.color = '#9DE5F3'
          } else if (item.id == 4) {
            itemData.itemStyle.color = '#FA6B67'
          } else if (item.id == 5) {
            itemData.itemStyle.color = '#8BC89E'
          }
          this.chartOptions.series[0].data.push(itemData)
          this.chartOptions.series[1].data.push(itemData)
        })
        this.drawEveryCostTypeCharts()
      }
    }
  };
</script>

<style>
  @import "../../../assets/css/last-charts.css";
</style>
